<template>
  <view class="box">
    <view class="header">
      <view class="txt">可用额度（元）</view>
      <view class="money">56000</view>
    </view>
    <view class="broadcast">
      <u-icon name="volume-fill" color="#2979ff" size="50"></u-icon>
      <swiper class="swiper" :vertical="true" :circular="true"  :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(item,index) in list" :key="index">
          <view class="swiper-item uni-bg-red">{{item}}</view>
        </swiper-item>
      </swiper>
    </view>
    <view class="form-box">
      <u-form :model="form" label-width="150" ref="uForm">
        <u-form-item label="选择额度">
          <u-input @click="show = true" v-model="form.edu" type="select" />
          <u-action-sheet @click="actionSheetCallback1" :safe-area-inset-bottom="true" :tips="{text:'请选择额度'}" :list="list1" v-model="show"></u-action-sheet>
        </u-form-item>
        <u-form-item label="申请期限">
          <u-input @click="show2 = true" v-model="form.time" type="select" />
          <u-action-sheet @click="actionSheetCallback2" :safe-area-inset-bottom="true" :tips="{text:'请选择期限'}" :list="list2" v-model="show2"></u-action-sheet>
        </u-form-item>
        <u-form-item label="申请用途">
          <u-input @click="show4 = true" v-model="form.use" type="select" />
          <u-action-sheet @click="actionSheetCallback3" :safe-area-inset-bottom="true" :tips="{text:'请选择期限'}" :list="list3" v-model="show4"></u-action-sheet>
        </u-form-item>
        <u-form-item label="收款银行卡"><u-input v-model="form.bank" type="number"  /></u-form-item>
        <u-form-item label="总利息">
          <view style="text-align: right;width: 100%;">{{interest}}元</view>
        </u-form-item>
      </u-form>
    </view>
    <view class="hint text-red flex justify-center align-center margin-top-sm">
      保证卡里有300余额，够首期利息，以免影响审核通过率
    </view>
    <view class="footer">
      <view class="protocol">
        <u-checkbox size="24" shape="circle" v-model="checked" :disabled="false">我已阅读并同意</u-checkbox><text>《应急花服务协议》</text>
      </view>
      <view class="btn">
        <u-button @click="handleSubmit" ripple type="primary">立即提现</u-button>
      </view>
    </view>
    <u-mask :show="show3">
      <view  @tap.stop class="warp">
        <view class="rect">
          <u-icon class="icon" @click="show3 = false" name="close-circle" color="#bbb" size="38"></u-icon>
          <view class="msg-hint">已向{{form.bankphone}}发送验证码</view>
          <u-form class="form-box1">
            <u-form-item :border-bottom="false" style="padding-right: 0" class="form-item">
              <view slot="right"><u-button @click="getCode" size="mini"  ripple type="primary">{{tips}}</u-button></view>
              <u-input  placeholder="请输入验证码" v-model="form.pcode" />
            </u-form-item>
            <u-form-item>
              <u-button ripple style="width: 100%" @click="handlePay" size="medium" type="primary">确认</u-button>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </u-mask>
    <u-verification-code :seconds="seconds" ref="uCode"
                         @change="codeChange"></u-verification-code>
  </view>
</template>

<script>
import {configQxPay, toQxpay} from "../../api";

export default {
  name: "withdraw",
  data() {
    return {
      show3:false,
      tips:'获取验证码',
      seconds:60,
      list:[
          '用户：189****8309，成功下款36000元',
          '用户：152****7802，成功下款42000元',
          '用户：176****8546，成功下款38000元',
          '用户：188****1254，成功下款96000元',
          '用户：177****8453，成功下款100000元',
          '用户：166****1254，成功下款105000元',
      ],
      checked:false,
      list1:[
        {text: '3000'},
        {text: '5000'},
        {text: '8000'},
        {text: '15000'},
        {text: '30000'},
        {text: '50000'},
        {text: '56000'}
      ],
      list2:[
        {text:'3个月',value:1.015},
        {text:'6个月',value:1.03},
        {text:'9个月',value:1.045},
        {text:'12个月',value: 1.06},
      ],
      list3:[
        {text:'个人日常消费'},
        {text:'装修'},
        {text:'旅游'},
        {text:'教育'},
        {text:'医疗'},
      ],
      form:{
        edu:'',
        time:'',
        bank:'',
        use:'',
        bankphone:'',
        pcode:''
      },
      show:false,
      show2:false,
      show4:false,
      type:'',
      interest:0
    }
  },
  methods:{
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        const { userId} =this.$store.getters.getUserInfo
        toQxpay({userId:userId}).then(e=>{
          uni.hideLoading();
          this.toQxpay = e.data
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        })
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    handleSubmit(){
      if (this.checked) {
        /*setTimeout(()=>{
          uni.redirectTo({
            url:'/pages/user/recommend'
          })
        },1000)*/
        this.getCode()
        this.show3 = true
      } else {
        uni.showToast({
          icon: 'none',
          title: '请阅读并同意协议'
        })
      }
    },
    handlePay(){
      const { userId} =this.$store.getters.getUserInfo
      configQxPay({
        userId:userId,
        orderId:this.toQxpay.data.id,
        msgCode:this.form.pcode
      }).then(e=>{
        uni.redirectTo({
          url:'/pages/user/recommend'
        })
      })
    },
    actionSheetCallback1(res){
      this.form.edu = this.list1[res].text
      if( this.type && this.form.edu ){
        this.interest = Math.ceil(this.form.edu * this.type - this.form.edu)
      }
    },
    actionSheetCallback2(res){
      this.form.time = this.list2[res].text
      this.type = this.list2[res].value
      if( this.type && this.form.edu ){
        this.interest = Math.ceil(this.form.edu * this.type - this.form.edu)
      }
    },
    actionSheetCallback3(res){
      this.form.use = this.list3[res].text
    }
  }
}
</script>

<style lang="scss" scoped>
page{
  overflow: hidden;
}
.header{
  // 1390 700   700 x
  width: 700rpx;
  height: 352rpx;
  margin: 30rpx auto;
  border-radius: 20rpx;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 50rpx;
  padding-top: 60rpx;
  background: url("~@/static/image/my/banner.png") 0/100% 100% no-repeat;
  .txt{
    font-size: 40rpx;
    letter-spacing: 8rpx;
  }
  .money{
    font-size: 60rpx;
    font-weight: bold;
    margin-top: 40rpx;
  }
}
.hint{
  width: 700rpx;
  height: 80rpx;
  border-radius: 60rpx;
  margin: 0 auto;
  border: 1px solid #e54d42;
  font-size: 24rpx;
}
.broadcast{
  display: flex;
  width: 700rpx;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 0 20rpx;
  border-radius: 8rpx;
  .swiper{
    color: #222;
    padding-left: 20rpx;
    height: 60rpx;
    line-height: 60rpx;
    width: 650rpx;
  }
}
.form-box{
  width: 700rpx;
  margin: 30rpx auto 0;
}
.footer{
  .protocol{
    width: 700rpx;
    margin: 30rpx auto;
    font-size: 24rpx;
  }
  .btn{
    width: 700rpx;
    margin: 0 auto;
  }
}
::v-deep .u-checkbox__label{
  font-size: 24rpx;
}
.rect {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 580rpx;
  transform: translate(-50%,-50%);
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 40rpx;
  .msg-hint{
    margin-top: 30upx;
    margin-bottom: 30upx;
  }
  .form-box1{

  }
  .icon{
    position: absolute;
    top: 20rpx;
    right: 20rpx;
  }
}
</style>
